import {useState, useEffect} from 'react';
import {I18n, Logger} from '@aws-amplify/core';
import {API_NAME} from '../util/Utils';
import {IPageProps, IDevice, ISimulation} from '../components/Shared/Interfaces';
import {API} from '@aws-amplify/api';
import PageTitleBar from '../components/Shared/PageTitleBar';
import Footer from '../components/Shared/Footer';
import Card from 'react-bootstrap/Card';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import Form from "react-bootstrap/Form";
import {useHistory} from "react-router";

export default function Simulation(props: IPageProps): JSX.Element {
  const logger = new Logger("Device Details");
  const history = useHistory();
  const [simulationNumber, setSimulationNumber] = useState<number>(1)

  /**
   * Create simulation
   */
  const handleSubmit = async (event: any) => {
    const form = event.currentTarget;
    event.preventDefault();
    form.checkValidity();
    try {
      await API.post(API_NAME, '/devices',{body: {simulationNumber: {simulationNumber}}});
      history.push('/simulation');
    } catch (err) {
      logger.error(I18n.get("simulation.error"), err);
      throw err;
    }

  }

  return (
    <div className="page-content">
      <PageTitleBar title={props.title}/>
      <Card style={{ border: '0' }}>
        <Card.Title>{I18n.get("application")}</Card.Title>
        <Card.Subtitle className="mb-2 text-muted">{I18n.get("application.description")}</Card.Subtitle>
        <Card.Body>
          <Form
            name="simulationForm"
            id="simulationForm"
            onSubmit={(event) => {
              handleSubmit(event)
            }}
          >
            <Form.Group>
              <Form.Label>{I18n.get("input.simulation.number")}</Form.Label>
              <Form.Control
                type="number"
                id="simulationNumber"
                max={128}
                min={1}
                value={simulationNumber}
                onChange={ e => setSimulationNumber(Number(e.target.value)) }
              >
              </Form.Control>
              <Form.Text className="muted">
                {I18n.get("device.status.description")}
              </Form.Text>
            </Form.Group>
            <Row className="float-right">
              <Button
                className="button-theme"
                form="simulationForm"
                type="submit"
              >
                {I18n.get("save")}
              </Button>
            </Row>
          </Form>
        </Card.Body>
      </Card>
      <Footer pageTitle={props.title}/>
    </div>
  )
}

